<template>
  <van-tabbar v-show="active" v-model="active" fixed placeholder>
    <van-tabbar-item v-for="bar of barList" :key="bar.name" v-bind="bar">
      <span>{{ bar.title }}</span>
      <template #icon="{ active }">
        <template v-if="bar.isCart">
          <TheCartIcon />
        </template>
        <template v-else>
          <van-icon :name="active ? bar.activeIcon : bar.icon" />
        </template>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { reactive, computed, unref } from "vue";
import { useRoute } from "vue-router";

let barList = reactive([
  {
    title: "首页",
    name: "home",
    to: "/home",
    icon: "wap-home-o",
    activeIcon: "wap-home-o",
    replace: true,
  },
  {
    title: "搜索",
    name: "search",
    to: "/search",
    icon: "search",
    activeIcon: "search",
    replace: false,
  },
  {
    title: "我的",
    name: "mine",
    to: "/mine",
    icon: "contact-o",
    activeIcon: "contact-o",
    replace: true,
  },
]);

let active = computed(() => {
  let tabbar = useRoute()?.meta?.tabbar;

  // 如果值为true 则继承原来状态
  if (tabbar) {
    return tabbar === true ? unref(active) : tabbar;
  }

  return "";
});
</script>

<style lang="scss" scoped>
::v-deep(.van-tabbar-item--main) {
  width: 60px;
  flex: 0 0 auto;
  .van-tabbar-item__icon {
    position: absolute;
    top: -20px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 100%;
    background-color: var(--dx-color-primary);

    z-index: 1;
  }
  .the-cart-icon {
    color: #fff;

    .van-icon__image {
      height: 32px;
      width: 32px;
    }
  }
  .van-tabbar-item__text {
    display: none;
  }
}
</style>
